<template>
  <div class="mapPoint_warp">
    <input class="input_style" type="text" :value="$props.modelValue" :destroy-on-close="true"
      placeholder="请输入经纬度并用逗号隔开" @input="valueChange" />
    <el-button type="primary" @click="showDialog" style="margin-left:5px">地图选点</el-button>
    <el-dialog title="地图选点" v-model="state.dialogVis" :before-close="close">
      <div style="height:300px;width:100%">
        <Map ref="mapRef" @ready="mapReady"></Map>
      </div>
      <div v-if="!state.lonlat[0]">请选择...</div>
      <div v-else>经度：{{ state.lonlat[0] }}，维度：{{ state.lonlat[1] }}</div>
      <template #footer>
        <el-button @click="commit" type="primary">确定</el-button>
        <el-button @click="close">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { watchEffect,watch, ref, reactive } from 'vue'
import Map from '_c/map/index.vue'
const state = reactive({
  dialogVis: false,
  lonlat: [],
  mapMarker: null
})

const mapRef = ref(null)
const emit = defineEmits(['update:modelValue','change'])

const showDialog = () => {
  state.dialogVis = true
}
const mapReady = () => {
  if (mapRef.value) {
    if (props.modelValue) {
      try {
        let a = props.modelValue.split(',')
        state.lonlat = a
        if (state.mapMarker) {
          state.mapMarker.remove()
        }
        if (mapRef.value) state.mapMarker = mapRef.value.createPoint({ lonlat: [parseFloat(a[0]),parseFloat(a[1])] })
      } catch (e) {
      }

    }
    mapRef.value.mapClick((e) => {
      if (state.mapMarker) {
        state.mapMarker.remove()
      }
      state.mapMarker = mapRef.value.createPoint({ lonlat: [e.coordinate[0].toFixed(4),e.coordinate[1].toFixed(4)] })
      state.lonlat = [e.coordinate[0].toFixed(4),e.coordinate[1].toFixed(4)]
    })
  }
}

// 确定选择的点位
const commit = () => {
  emit('update:modelValue', [state.lonlat[0], state.lonlat[1]].join(','))
  emit('change', [state.lonlat[0], state.lonlat[1]].join(','))
  close()

}
// 确定选择的点位
const valueChange = (e) => {
  emit('update:modelValue', e.target.value)
  emit('change', e.target.value)

}
const close = () => {
  state.dialogVis = false
  state.lonlat = [];
  // if (mapRef.value) mapRef.value.removeMapClick()
  if (state.mapMarker) {
    state.mapMarker.remove()
  }
}
const props = defineProps({
  modelValue: String,
  formType: {
    type: String,
    default() {
      return 'add'
    }
  }
})



watchEffect(() => {
  // if (state.dialogVis) mapReady()
  // else close()
})
watch(props.modelValue,() => {
  if (props.modelValue) {
    try {
      let a = props.modelValue.split(',')
      // res.lng = a[0]
      // res.lat = a[1]
      state.lonlat = a
      if (state.mapMarker) {
        state.mapMarker.remove()
      }
      if (mapRef.value) state.mapMarker = mapRef.value.createPoint({ lonlat: a })
    } catch (e) {
    }

  }
});

</script>

<style lang="scss" scoped>
.mapPoint_warp {
  display: flex;
  flex-direction: row;
}

.input_style {
  width: 100%;
  border-radius: 4px;
  border: var(--el-border);
  outline: none;
  padding: 0 10px;
  font-size: 14px;
}
</style>
